window.onload = function(){
    const screenWidth = window.innerWidth;
    if(screenWidth <= 800)
        phoneJS()
}



function phoneJS(){
    const html = document.getElementById('write');
    const content = document.getElementsByClassName('typora-export-content')[0];
    const bar = document.getElementsByClassName('outline-content')[0];
    const div = document.createElement('div');
    div.innerHTML = bar.innerHTML;

    content.classList.add('phone-typora-export-content')
    div.className = 'phone-outline-content outline-content';
    div.style.display = 'none';
    content.appendChild(div);

    //左按钮调大小，长按
    const leftButton = document.createElement('div');
    leftButton.className = 'phone-leftButton';
    content.appendChild(leftButton);

    let originY = null;
    let diff = 0;
    html.style.zoom = +localStorage.getItem('zoom');
    leftButton.addEventListener('touchstart',function(e){
        originY = e.touches[0].clientY;
        html.style.zoom = diff = 1;
        this.innerText = 1;
    })
    leftButton.addEventListener('touchmove',function(e){
        if((1 - diff * 0.01) > 0){
            diff = 1 - (originY - e.touches[0].clientY)/3 * 0.01;
            html.style.zoom = diff
            this.innerText = Math.floor(diff*10)/10;
        }
    })
    leftButton.addEventListener('touchend',function(e){
        localStorage.setItem('zoom',diff)
    })
    //右按钮按钮呼出目录
    const rightButton = document.createElement('div');
    rightButton.className = 'phone-rightButton';
    content.appendChild(rightButton);
    rightButton.addEventListener('touchstart' ,function(){
        if(div.style.display == 'none'){
            div.style.display = 'inline-block'
        }
        else
            div.style.display = 'none'; //再次点击关闭目录
    })

    // 全局目录取消
    document.body.addEventListener('touchstart',function(e){
        if(div.contains(e.target) || e.target === leftButton || e.target === rightButton) return;//除了在滑目录 或者在点击button
        div.style.display = 'none'; //再次点击关闭目录

    })
    //全文长度
    const contentLen = document.body.clientHeight;
    //视口长度
    const viewLen = window.innerHeight;
    //全局滑动记录位置
    window.addEventListener('touchend',function(){
        const pageY = window.pageYOffset || window.scrollY || -1;
        if(pageY >= 0 ){
            //记录命名空间
            const spaceName = location.pathname;
            localStorage.setItem('pageY:'+spaceName,pageY);
            rightButton.innerText = Math.floor((pageY + viewLen ) / contentLen * 1000) / 10;
        }
    })
    //初始化位置
    const spaceName = location.pathname;
    const pageY = localStorage.getItem('pageY:'+spaceName);
    if(pageY !== null){
        setTimeout(() => {
            window.scrollTo(0,pageY); 
        });
    }


    const style = document.createElement('style');
    style.innerHTML = `
    @media screen and (max-width:800px){
        .phone-typora-export-content{
            overflow:auto
        }
        .phone-outline-content{
            position:fixed;
            z-index:9999;
            width:70vw;
            height:70vh;
            top:0;
            left:50%;
            border: 1px solid #e0e0e0;
            overflow:auto;
            transform:translateX(-50%);
            background-color: #363B40;
        }
        .phone-rightButton,.phone-leftButton{
            position:fixed;
            z-index:999;
            width:10vw;
            height:10vw;
            background-color:black;
            border-radius:50%;
            opacity:.5;
            text-align:center;
            line-height:10vw;
            font-size:1em;
        }
        .phone-rightButton{
            right:10vw;
            bottom:10vw;

        }
        .phone-leftButton{
            left:10vw;
            bottom:10vw;
        }
    }
    `

    const head = document.getElementsByTagName('head')[0];
    head.appendChild(style);
}